<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>计算属性 and 方法属性</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
	
<div id="app" class="">
	<p>
		品名：{{name}} <br>
		价格：<input type="number" v-model.number="price"> <br>
		数量：<input type="number" v-model.number="number"> <br>
	</p>
	<p>金额：{{price * number}} 元（表达式）</p>
	<p>金额：{{total}} 元（计算属性）</p>
	<p>金额：{{total2(100)}} 元（计算属性2）</p>
	<p>金额：{{total_fn()}} 元（方法属性）</p>
</div>

</body>
<script>
const HelloVueApp = {
	data() {
		return {
			name: 'iphoneXR',
			price: 5000,
			number: 2,
		}
	},
	//计算属性
	computed:{
		total:function(){
			return this.price * this.number;
		},
		total2(){
			return function(n){
				return this.price * this.number * n;
			}
		}
	},
	//方法属性
	methods:{
		total_fn:function(){
			return this.price * this.number;
		}
	}
}
var vm = Vue.createApp(HelloVueApp).mount('#app');

</script>

</html>